<template>
   <div class="container-fluid" style="background-color:#F2F2F2 ;height:inherit;">
    <div class="row">
        <div class="col col-lg-12" style="background-color: white;width:90%;margin: 20px auto;">
           <ul class="state">
            <li>商品信息</li>
            <li>价格</li>
            <li>状态</li>
            <li>操作</li>
           </ul>
        </div>
    </div>

    <div class="row" style="background-color: white;width: 90%;margin: 0px auto;">
        <div class="col col-lg-12" style="margin:0 auto;" v-for="(item,index) in goods" :key="index">
            <div class="row mt-3" style="position: relative;">
                <div class="col col-lg-4">
            </div>
            <div class="col col-lg-6"></div>
            </div>
            
            <div class="row mb-2 mt-3" :class="['third',item.isChecked?'third_red':'']">
                <div class="col col-lg-12">
                   <div class="row" style="display: flex;align-items:center" >
                      <div class="col col-lg-3"><img :src="item.img" style="width: 100%; height: 140px;margin: 20px 0px 20px 20px;"></div>
                      <div class="col col-lg-3" >
                        <strong class="mb-4" style="font-size: 16px;overflow: hidden;display: block;width:100%;text-align: left; ">【{{ item.text1 }}】</strong >
                        <span style="display: inline-block;font-size: 13px;text-align: center;color: black;overflow: hidden;height: 52px;">
                            {{item.text2}}
                        </span>
                      </div>
                       <div class="col col-lg-1">
                          <span>{{item.money*item.count}}元</span>
                       </div>
                       <div class="col col-lg-1">
                          <span style="color:black;font-size: 14px;">{{item.static}}</span>
                       </div>
                       <div class="col col-lg-1" >
                          <span class="del" @click="removeProduct(item)">删除订单</span>
                       </div>
                       <div class="col col-lg-1">
                          <span class="del" >查看详情</span>
                       </div>
                       <div class="col col-lg-1">
                          <span class="del" @click="shouhuo(item)">确认收货</span>
                       </div>
                   </div>
                </div>
                <div class="col col-lg-1">
                </div>
            </div>
        </div>
    </div>
    <div class="col col"></div>

   </div>
</template>

<script>
export default{
    data(){
        return{
            allChecked: false, //默认没有选上
            isChecked: false,
            list:[],
            goods: [
        {
          id: 1,
          text1: '芝士蛋糕',
          text2:
            '口感和风味的各种辅料，冷冻后食用其味无穷，成为蛋糕中的极品。慕斯与布丁一样属于甜点的一种，其性质较布丁更柔软，入口即化',
          money: 80,
          count:1,
          tatalPrice:80,
          isChecked:false,
          static:'未收货',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs2.best-wallpaper.net%2Fwallpaper%2F1920x1080%2F1902%2FOne-slice-of-fruit-cake-blueberries-raspberries_1920x1080.jpg&refer=http%3A%2F%2Fs2.best-wallpaper.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659578294&t=fa0143a5580560612af797fca423e4f7',
        },
        {
          id: 2,
          text1: '草莓蛋糕',
          text2:
            '口感和风味的各种辅料，冷冻后食用其味无穷，成为蛋糕中的极品。慕斯与布丁一样属于甜点的一种，其性质较布丁更柔软，入口即化',
          money: 36,
          count:2,
          totalPrice:72,
          isChecked:false,
          static:'未收货',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fbg_w1180%2F00%2F14%2F43%2F8qb12yuWbb.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659578294&t=084a24b3654eb5e4a7fad40c426d12db',
        },
      ],
        }
    },
     created(){
        
        this.list.id=this.$route.params.id;
        this.list.text1=this.$route.params.text1;
        this.list.text2=this.$route.params.text2;
        this.list.money=this.$route.params.money;
        this.list.count=Number(this.$route.params.count);
        this.list.totalPrice=this.$route.params.totalPrice;
        this.list.isChecked=this.$route.params.isChecked;
        this.list.img=this.$route.params.img;
        this.list.static=this.$route.params.static
        let good=this.list
        this.goods.unshift({...good})
        // console.log('购物车',good)
    },
    methods: {
        //删除商品
        removeProduct(item){
            this.goods.splice(item,1)
        },
        
        //一键删除
        removeAll(){
            this.goods=[]
        },
        shouhuo(item){
            alert('收货成功')
            item.static='已收货'
        }
    },
}
</script>


<style lang="scss" scoped>
.first li{
    list-style: none;
    float: left;
    margin: 20px;
}
.first li:nth-child(1){
    width: 180px;
    margin-left: 114px;
}
.first li:nth-child(2){
    width: 180px;
    margin: 20px;
}
.first li:nth-child(3){
    width: 180px;
    margin: 20px;
}
.first li:nth-child(4){
    width:180px;
    margin: 20px;
}
.first li:nth-child(5){
    width: 180px;
    margin: 20px;
}
.sub{
    display: inline-block;
    background-color: #f0f0f0;
    color: #000;
    width: 17px;
}
.add{
    display: inline-block;
    background-color: #f0f0f0;
    color: #000;
    width: 17px;
}
.third{
    border: 1px solid gainsboro;
    display: flex;
    align-items:center;
    width: 90%;
    margin: auto;
}
.third_red{
    background-color: rgba(243, 202, 249, 0.6);
    display: flex;
    align-items:center;
}
.real{
    width: 30px;
    text-align: center;
}
.ckb {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    vertical-align: text-bottom;
}

.ckb_s {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    background: url('../../assets/gouico.png') no-repeat 0 0;
    background-size: 1.1rem;
    border: 0;
    vertical-align: text-bottom;
}

.operate{
    background-color: #E6E6E6;
    height: 60px;width: 80%;
    margin: 0 auto;
    align-items:center;
    position: sticky;
    bottom: 0;
    left: 0;
}
.del{
    font-size: 14px;
    width: 70px;
    height: 36px;
    line-height: 36px;
    // background-color: white;
    color: black;
    margin:13px auto;
    border-radius: 10px;
    display: inline-block;
    // margin-left:20px ;
}
.del:hover{
    background: #FF7BAC;
    color: white;
    transform: scale(1.1);
}
.state li{
    width: 200px;
    margin: 0 auto;
    display: inline-block;
    height: 0px;
    line-height: 40px;
}
</style>